<template>
  <section class="result-list-content" id="page" ref="page">
    <!-- 头部导航栏 -->
    <HeaderCom />
    <div class="bannerBox">
      <img
        src="./../researchResult/assets/images/banner-2.png"
        class="banner"
      />
      <img
        class="banner-word"
        src="../researchResult/assets/images/slogen.png"
        alt=""
        srcset=""
      />
    </div>
    <img
      src="../../assets/images/student/upTop.png"
      class="upTop"
      @click="upTop"
      id="upTop"
    />
    <div class="page-content">
      <BreadNav
        :breadList="breadList"
        style="padding-left: 31px; margin-bottom: 20px"
      />
      <!-- <el-breadcrumb separator-class="el-icon-arrow-right" class="steps-content">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/researchResult' }"
          >研究成果</el-breadcrumb-item
        >
        <el-breadcrumb-item class="last-bread">研究成果列表</el-breadcrumb-item>
      </el-breadcrumb> -->
      <div class="header-bar">
        <el-select
          v-model="typeId"
          placeholder="请选择"
          size="small"
          class="input-box"
        >
          <el-option
            v-for="item in typeList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>

        <el-input
          class="input-box"
          size="small"
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="title"
        >
        </el-input>

        <el-button type="primary" size="small" class="btn" @click="handleSearch"
          >搜索</el-button
        >
        <span class="reset-btn" @click="handleReset">重置</span>
      </div>

      <div class="list-content" v-if="pannelList && pannelList.length > 0">
        <div
          class="item-box"
          v-for="(item, i) in pannelList"
          :key="i"
          @click="handleView(item)"
          :class="[i === pannelList.length - 1 ? 'isHideLine' : '']"
        >
          <div class="img-box">
            <img v-imgError2 class="img-inner" :src="item.headUrl" alt="" />
          </div>
          <div class="info-box">
            <div class="title">{{ item.title }}</div>
            <div class="info-bottom">
              <span class="types">{{ item.newsTypeName }}</span>
              <span class="time marRig">{{ item.releaseTime }}</span>
              <span class="time marRig">数据平台</span>
              <span class="time marRig">机构上传</span>
            </div>
          </div>
        </div>
      </div>
      <el-empty description="无数据" v-else></el-empty>
      <Pagination
        style="margin: 48px 0"
        :page="page"
        :limit="limit"
        :total="total"
        :pageSizes="[20, 100, 300, 500]"
        v-on:handleChildGetList="handleParentGetList"
      >
      </Pagination>
    </div>
    <div class="mainFooter" id="pageFooter">
      <FooterMenu />
    </div>
  </section>
</template>

<script>
import Vue from "vue";
import FooterMenu from "@/components/footerMenu/index.vue";
import HeaderCom from "@/components/header";
import vueMiniPlayer from "vue-mini-player";
import "vue-mini-player/lib/vue-mini-player.css";
import Items from "./components/Items.vue";
import ListItems from "./components/list-item.vue";
import Pagination from "@/views/components/pagination";
import {
  geStudentNewsStudyInfoPage,
  getStudentNewsStudyType,
} from "@/request/api";
import { formatTime } from "@/utils/utils";
import BreadNav from "@/components/breadNav/index";
Vue.use(vueMiniPlayer);
const TYPE = 2;
//
export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: { HeaderCom, FooterMenu, Items, ListItems, Pagination, BreadNav },
  // 组件状态值
  data() {
    return {
      activeIndex: 0,
      total: 0,
      pannelList: [],
      input2: "",
      page: 1,
      limit: 10,
      total: 0,
      typeId: "",
      typeList: [],
      title: "",
      breadList: [
        {
          name: "首页",
          path: "/",
        },
        {
          name: "研究成果",
          path: "/researchResult",
        },
        {
          name: "研究成果列表",
          path: "",
        },
      ],
    };
  },
  created() {
    this.getList();
    this.getStudentNewsStudyType();
  },
  // 组件方法
  methods: {
    async getList() {
      const { code, data } = await geStudentNewsStudyInfoPage({
        pageNo: this.page,
        pageSize: this.limit,
        type: TYPE,
        typeId: this.typeId,
        title: this.title,
      });
      if (code !== 0) {
        this.pannelList = [];
      }
      this.pannelList = data.list.map((v) => {
        return {
          ...v,
          releaseTime: formatTime(new Date(v.releaseTime)),
        };
      });
      this.total = data.total;
      this.upTop();
    },
    async getStudentNewsStudyType() {
      const { code, data } = await getStudentNewsStudyType({
        type: TYPE,
      });
      if (code !== 0) {
        this.typeList = [];
        return;
      }
      this.typeList = data;
    },

    handleView(item) {
      const routerUrl = this.$router.resolve({
        path: "/searchResultDetail/list",
        query: { id: item.id },
      });
      window.open(routerUrl.href, "_blank");
    },

    handleSearch() {
      this.page = 1;
      this.getList();
    },
    handleReset() {
      this.typeId = "";
      this.title = "";
      this.page = 1;
      this.getList();
    },
    upTop() {
      window.scrollTo(0, 0);
    },
    handleViewMore() {
      this.$router.push("/resultList");
    },
    handleParentGetList(page, limit) {
      this.page = page;
      this.limit = limit;
      this.getList();
    },
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer); //关闭
    }
  },
};
</script>
<style lang="less">
.result-list-content {
  .last-bread {
    .el-breadcrumb__inner {
      color: #3d6cb0 !important;
    }
  }
}
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.result-list-content {
  position: relative;
  width: 100%;
  background: rgb(237, 242, 249);
  padding-top: 80px;
  .upTop {
    width: 46px;
    position: fixed;
    bottom: 107px;
    right: calc((100% - 1200px) / 2 - 78px);
    cursor: pointer;
    transition-duration: 0.3s;
  }
  .bannerBox {
    width: 100%;
    position: relative;
    height: 170px;
    overflow-x: hidden;
    .banner {
      width: 100%;
      // -o-object-fit: contain;
      // object-fit: contain;
      height: 100%;
      display: block;
      min-width: 1920px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      z-index: 2;
    }
    .banner-word {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      z-index: 9;
      width: 456px;
    }
  }

  .steps-content {
    margin: 0 0 20px;
    padding: 0 30px;
    font-size: 15px;
  }
  .page-content {
    width: 1200px;
    background: white;
    margin: 22px auto;
    min-height: 500px;
    padding: 23px 0 48px 0;

    .header-bar {
      display: flex;
      align-items: center;
      justify-content: start;
      padding: 0 0 20px 30px;

      .input-box {
        width: 290px !important;
        margin-right: 15px;
      }

      .btn {
        background: #4677b9 !important;
        margin-right: 15px;
      }

      .reset-btn {
        color: #3d6cb0;
        font-size: 15px;
        cursor: pointer;
      }
    }

    .list-content {
      padding: 0 30px;
      min-height: calc(100vh - 630px);
      .item-box {
        display: flex;
        justify-content: start;
        padding: 16px 0 21px 0;
        border-bottom: 1px solid #d4d6da;
        cursor: pointer;

        .img-box {
          width: 64px;
          height: 84px;
          margin-right: 15px;
          display: flex;
          justify-content: center;
          align-items: center;

          .img-inner {
            object-fit: cover;
            width: 100%;
            height: 100%;
          }
        }

        .info-box {
          flex: 1;
          display: flex;
          align-items: self-start;
          flex-flow: column nowrap;
          justify-content: space-between;
          padding: 8px 0;
          .title {
            font-family: PingFangSC-Regular, PingFang SC;
            color: #37383d;
            font-size: 20px;
          }

          .info-bottom {
            color: #9597a0;
            font-size: 18px;

            .types {
              padding: 3px 14px;
              background: rgba(47, 142, 254, 0.07);
              box-sizing: #2f8efe;
              border: 1px solid #2f8efe;
              border-radius: 4px;
              color: #2f8efe;
              border-radius: 4px;
              margin-right: 15px;
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
            }
            .time {
              font-size: 15px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: #9597a0;
              line-height: 21px;
            }
            .marRig {
              margin-right: 8px;
            }
          }
        }
      }
    }
  }
}
</style>
